<template>
	<view class="container">
		<!-- 顶部背景 -->
		<u-navbar leftText=" " leftIcon=" " title="首页" :fixed="false" :bgColor="'transparent'" :titleStyle="{
			color: '#333',
			fontSize: '16px',
		}"></u-navbar>
		<image :src="top_img_bg" mode="widthFix" class="top-img-bg" :placeholder="true"></image>
		<!-- 顶部内容区 -->
		<view class="header">
			<!-- 搜索框 -->
			<view class="search-box">
				<!-- <view class="location" @click="selectArea"> -->
				<!-- 萧岗社区 -->

				<!-- <u-icon name="arrow-down" size="18">{{ areaname }}</u-icon> -->
				<!-- </view> -->
				<view class="search-input" @click="toHouseList">
					<u-search placeholder="请输入关键搜索" :show-action="false" :clearabled="false"
						style="background: transparent" :animation="false" disabled="true"
						@click="toHouseList"></u-search>
				</view>
			</view>
		</view>
		<u-picker :show="showArea" :columns="columnsArea" @cancel="cancelArea" @confirm="confirmArea"
			keyName="name"></u-picker>
		<!-- 功能导航 -->
		<view class="nav-section">
			<view class="nav-item" v-for="(item, index) in navList" :key="index" @click="handleNavClick(item)">
				<image :src="item.icon" mode="widthFix" class="nav-icon"></image>
				<text class="nav-text">{{ item.title }}</text>
			</view>
		</view>

		<!-- 服务卡片区 -->
		<view class="service-cards">
			<view class="left">
				<view class="service-card" @click="toHouseSource">
					<view class="card-content">
						<text class="card-title">安心房源</text>
						<text class="card-desc">查询指定房东发布房源</text>
						<view class="card-btn">去看看</view>
					</view>
					<image :src="icon_img1" mode="aspectFit" class="card-icon"></image>
				</view>
			</view>
			<view class="right">
				<view class="service-card" @click="toAd">
					<view class="card-content">
						<text class="card-title">便民广告</text>
						<text class="card-desc">广告发布</text>
					</view>
					<image :src="icon_img2" mode="aspectFit" class="card-icon"></image>
				</view>
				<view class="service-card" @click="toShop">
					<view class="card-content">
						<text class="card-title">附近商圈</text>
						<text class="card-desc">商圈查询，更便捷</text>
					</view>
					<image :src="icon_img3" mode="aspectFit" class="card-icon"></image>
				</view>
			</view>
		</view>

		<!-- 推荐房源 -->
		<view class="recommend">
			<view class="recommend-header">
				<view class="left">
					<image :src="recommend_icon" class="recommend-icon"></image>
				</view>
				<view class="right" @click="toHouseList">
					全部
					<u-icon name="arrow-right" color="#909399" size="16"></u-icon>
				</view>
			</view>
			<view class="filter-tabs">
				<view class="tab-list">
					<view class="tab-item" v-for="(item, index) in filterTabs" :key="index"
						@click="handleTabClick(index)">
						<text :class="['tab-text', currentTab === index ? 'active' : '']">
							{{ item.name }}
						</text>
						<u-icon :name="currentTab === 0 ? 'arrow-up' : 'arrow-down'" size="12" color="#666"></u-icon>
					</view>
				</view>
			</view>
			<!-- 房源列表 -->
			<view class="house-list">
				<view class="house-item" v-for="(item, index) in houseList" :key="index" @click="toHouseDetail(item)">
					<image :src="item.images[0]" class="house-img" mode="aspectFill"></image>
					<view class="house-info">
						<text class="house-title">{{ item.name }}</text>
						<view class="house-attrs">
							<text>{{ item.floor }}层</text>
							<text>{{ item.area }}m²</text>
							<text>{{ item.house_type_text }}</text>
						</view>
						<view class="house-price">
							<text class="price">¥{{ item.rent }}</text>
							<text class="unit">/月</text>
						</view>
						<view class="house-tags">
							<view class="tag" v-for="(tag, tagIndex) in item.tags_text" :key="tagIndex"
								v-show="tagIndex < 3">
								{{ tag }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 租房群二维码 -->
		<view class="group_qr" v-if="showQrCode">
			<view class="qr_box">
				<view class="qr_content">
					<view class="text">长按识别二维码加入社区群</view>
					<view class="qr_img">
						<image :src="qr_img" show-menu-by-longpress></image>
					</view>
					<view class="button" @click="closeQrCode">确认</view>
				</view>
				<u-icon size="28" color="#ffffff" name="close-circle" class="close_icon" @click="closeQrCode"></u-icon>
			</view>
		</view>
		<uni-popup ref="popup" style="background-color: #ffffff">
			<view class="filter_box" style="background-color: #ffffff">
				<view class="filter_option">
					<view class="option-item1" v-if="currentTab == 0">
						<view class="filter_option_item" :class="{ active: filterTabs[0].value === i + 1 }"
							v-for="(item, i) in sortList" @click="selectOption1(item)">
							{{ item.label }}
						</view>
					</view>
					<view class="two_level_option" v-if="currentTab == 1">
						<view class="options">
							<view class="leftoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="lefttext" @click="leftTab('', 0)"
										:class="{ active: leftcurrentTab === 0 }">
										全部区域
									</view>
									<view class="lefttext" :key="item.value" v-for="(item, i) in communityList"
										@click="leftTab(item.value, i + 1)"
										:class="{ active: leftcurrentTab === i + 1 }">
										{{ item.name }}
									</view>
								</scroll-view>
							</view>
							<view class="rightoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="righttext" :key="item.id" v-for="(item, i) in streetList"
										@click="rightTab(item, i)" :class="{ active: rightcurrentTab === i }">
										{{ item.name }}
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="areaCancel">重置</view>
							<view class="btn primary-btn" @click="areaConfirm">确定</view>
						</view>
					</view>
					<view class="house_type" v-if="currentTab == 2">
						<scroll-view class="tags_type_option_list" scroll-y>
							<view class="house_type_option" style="padding-bottom: 20rpx;">
								<view class="title">
									居室
								</view>
								<view class="options"
									style="display: flex;align-items: center;font-size: 25rpx;color: #999;">
									<u--input border="bottom" v-model="form.room_num" type="digit"></u--input>室
									<u--input border="bottom" v-model="form.ting_num" type="digit"></u--input>厅
									<u--input border="bottom" v-model="form.toilet_num" type="digit"></u--input>卫
								</view>
							</view>
							<view class="house_type_option" :key="i" v-for="(item, i) in houseTypeOption">
								<view class="title">
									{{ item.name }}
								</view>
								<view class="options">
									<view class="option-item" :key="j" :class="{ ischeck: option.ischeck }"
										v-for="(option, j) in item.options" @click="handleChecked(item.type, option)">
										{{ option.name }}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="btns-group">
							<view class="btn default-btn" @click="houseTypeCancel">重置</view>
							<view class="btn primary-btn" @click="houseTypeConfirm">
								确定
							</view>
						</view>
					</view>
					<view class="rent_type" v-if="currentTab == 3">
						<view class="rent_type_option">
							<view class="options" :class="{ active: rentcurrentTab === i }" :key="i"
								v-for="(item, i) in rentTypeOption" @click="handleRentSelect(item, i)">
								{{ item }}
							</view>
						</view>
						<view class="custom_rent">
							<view class="title">自定义价格</view>
							<view class="slider">
								<u-slider v-model="customRentValue" step="100" min="0" max="10000"
									@change="customRentChange"></u-slider>
							</view>
							<view class="show_value">
								<text>0</text>
								<text>{{ customRentValue }}元</text>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="rentTypeCancel">重置</view>
							<view class="btn primary-btn" @click="rentTypeConfirm">确定</view>
						</view>
					</view>
					<view class="tags_type" v-if="currentTab == 4">
						<scroll-view class="tags_type_option_list" scroll-y>
							<view class="tags_type_option" :key="i" v-for="(item, i) in tagsList">
								<view class="tag_options">
									<view class="title">
										{{ item.name }}
									</view>
									<view class="options">
										<view class="option-item" :key="j" :class="{ ischeck: option.ischeck }"
											v-for="(option, j) in item.options"
											@click="handleTagChecked(item.type, option)">
											{{ option.name }}
										</view>
									</view>
								</view>
							</view>
							<view class="form-item" style="padding: 0 20rpx;margin: 20rpx;">
								<view class="title required">押金</view>
								<view class="input-group">
									<view class="input" style="width: 100%;" @click="showPaymentPicker = true">
										{{ form.payment_type ? formatDataList(form.payment_type, paymentTypeList[0]) :
											'请选择' }}
									</view>
									<!-- <input v-model="dataForm.price" placeholder="输入房租" class="input" type="digit" /> -->
								</view>
								<!-- <view class="unit">元/月</view> -->
							</view>
						</scroll-view>
						<view class="btns-group">
							<view class="btn default-btn" @click="tagsTypeCancel">重置</view>
							<view class="btn primary-btn" @click="tagsTypeConfirm">确定</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-loadmore :status="status" />
		<u-picker :show="showPaymentPicker" :columns="paymentTypeList" keyName="name"
			@cancel="showPaymentPicker = false" @confirm="confirmSelectPayment"></u-picker>
		<view class="safe-bottom"></view>
	</view>
</template>

<script>
import { setTabBarMsgNum } from '@/utils/utils.js';
import {
	mapGetters
} from "vuex";
import {
	getRecomments,
	getHouses,
	qrcode
} from "@/api/houseresources.js";
import {
	getArea,
	getTagList
} from "@/api/gent.js";
import {
	getHouseOptionList
} from "@/api/mine.js";
export default {
	data() {
		return {
			showPaymentPicker: false,
			areaname: "",
			showArea: false,
			columnsArea: [],
			status: "loadmore",
			top_img_bg: this.$Config.HTTP_REQUEST_URL + "/img/index-top_bg.png",
			qr_img: this.$Config.HTTP_REQUEST_URL + "/img/qr.png",
			recommend_icon: this.$Config.HTTP_REQUEST_URL + "/img/index-recommend.png",
			icon_img1: this.$Config.HTTP_REQUEST_URL + "/img/icon-img1.png",
			icon_img2: this.$Config.HTTP_REQUEST_URL + "/img/icon-img2.png",
			icon_img3: this.$Config.HTTP_REQUEST_URL + "/img/icon-img3.png",
			navList: [{
				title: "客服微信",
				icon: this.$Config.HTTP_REQUEST_URL + "/img/index-icon1.png",
			},
			{
				title: "商铺&写字楼",
				icon: this.$Config.HTTP_REQUEST_URL + "/img/index-icon2.png",
			},
			{
				title: "房屋转租",
				icon: this.$Config.HTTP_REQUEST_URL + "/img/index-icon3.png",
			},
			{
				title: "宽带报修",
				icon: this.$Config.HTTP_REQUEST_URL + "/img/index-icon4.png",
			},
			],
			queryparams: {
				page: 1,
				page_size: 9999,
			},
			form: {
				room_num: '',
				ting_num: '',
				toilet_num: '',
				community: null,
				street: null,
				rent: null,
				keyword: null,
				order_type: null,
				house_type: [],
				face: [],
				floor: [],
				tags: [],
				decoration: null,
				payment_type: null,
			},
			paymentTypeList: [
				[{
					name: "押一付一",
					type: "押一付一",
				},
				{
					name: "押一付二",
					type: "押一付二",
				}, {
					name: "押一付三",
					type: "押一付三",
				}, {
					name: "押二付一",
					type: "押二付一",
				}, {
					name: "押二付二",
					type: "押二付二",
				}, {
					name: "押二付三",
					type: "押二付三",
				}, {
					name: "押三付一",
					type: "押三付一",
				}, {
					name: "押零付一",
					type: "押零付一",
				}
				]
			],
			houseList: [],
			showQrCode: false,
			statusBarHeight: 0,
			navBgColor: "transparent",
			filterTabs: [{
				name: "综合排序",
				value: 1,
			},
			{
				name: "区域",
				value: "",
			},
			{
				name: "户型",
				value: "",
			},
			{
				name: "租金",
				value: "",
			},
			{
				name: "更多",
				value: "",
			},
			],
			currentTab: null,
			leftcurrentTab: 0,
			rightcurrentTab: -1,
			rentcurrentTab: 0,
			sortList: [{
				label: "综合排序",
				value: 1,
			},
			{
				label: "最新发布",
				value: 2,
			},
			{
				label: "好评优先",
				value: 3,
			},
			{
				label: "价格(从低到高)",
				value: 4,
			},
			{
				label: "价格(从高到低)",
				value: 5,
			},
			{
				label: "面积(从小到大)",
				value: 6,
			},
			{
				label: "面积(从大到小)",
				value: 7,
			},
			{
				label: "楼层(从高到低)",
				value: 8,
			},
			{
				label: "楼层(从低到高)",
				value: 9,
			},
			],
			streetList: [],
			communityList: [],
			houseTypeOption: [
				// 	{
				// 	type: 1,
				// 	name: "居室",
				// 	options: [],
				// },
				// {
				// 	type: 2,
				// 	name: "朝向",
				// 	options: [{
				// 		name: "东",
				// 		value: "东",
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "西",
				// 		value: "西",
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "南",
				// 		value: "南",
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "北",
				// 		value: "北",
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "东南",
				// 		value: "东南",
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "西南",
				// 		value: "西南",
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "东北",
				// 		value: "东北",
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "西北",
				// 		value: "西北",
				// 		ischeck: false,
				// 	},
				// 	],
				// },
				{
					type: 3,
					name: "楼层",
					options: [{
						name: "1-3层",
						value: "1-3",
						ischeck: false,
					},
					{
						name: "4-5层",
						value: "4-5",
						ischeck: false,
					},
					{
						name: "6层以上",
						value: "6-99",
						ischeck: false,
					},
					],
				},
			],
			rentTypeOption: [
				"不限",
				"1000元以下",
				"1000元-2000元",
				"2000元-3000元",
				"3000元-5000元",
				"5000元以上",
			],
			customRentValue: 0,
			tagsList: [{
				name: "特色标签",
				type: 1,
				options: [],
			},
				// {
				// 	name: "装修",
				// 	type: 2,
				// 	options: [{
				// 		name: "精装修",
				// 		value: 2,
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "普通装修",
				// 		value: 1,
				// 		ischeck: false,
				// 	},
				// 	],
				// },
				// {
				// 	name: "付款",
				// 	type: 3,
				// 	options: [{
				// 		name: "押一付三",
				// 		value: 1,
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "押二付一",
				// 		value: 2,
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "押三付一",
				// 		value: 3,
				// 		ischeck: false,
				// 	},
				// 	{
				// 		name: "押一付二",
				// 		value: 4,
				// 		ischeck: false,
				// 	},
				// 	],
				// },
			],
			houseList: [],
		};
	},
	computed: mapGetters(["isLogin", "uid", "userInfo"]),
	onLoad() {
		// 获取状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		// this.getAreaList();
		// this.getHouseOptionLists()
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			let a = 0
			this.$Api.chat.getUserUnReadNumber().then(res => {
				a = res.data.data
				this.$Api.chat.getUserToUserUnReadNumber().then(res => {
					a = a + res.data.data
					if (a > 0) {
						uni.setTabBarBadge({
							index: 3, // TabBar的索引
							text: a + '' // 显示的数字
						});
					} else {
						uni.removeTabBarBadge({
							index: 3, // TabBar的索引
						});
					}
				})
			})
		}

		this.getAreaList();
		if (uni.getStorageSync("userInfo")) {
			this.getHouseOptionLists();
		}

		setTimeout(() => {
			this.getCommentsList();
			if (this.form.community && this.form.community != "") {
				this.communityList.forEach((item, i) => {
					if (item.value == this.form.community) {
						console.log(this.form.community);
						this.leftTab(this.form.community, i + 1);
					}
				});
			}
		}, 2000);
	},
	onPageScroll(e) {
		// 根据滚动距离改变导航栏背景色
		if (e.scrollTop > 50) {
			this.navBgColor = "#ffffff";
		} else {
			this.navBgColor = "transparent";
		}
	},
	methods: {
		// 选择押付方式
		confirmSelectPayment(event) {
			this.form.payment_type = event.value[0].type;
			this.showPaymentPicker = false;
		},
		formatDataList(data, list) {
			if (!data || !list || !Array.isArray(list)) {
				return '';
			}
			const item = list.find(item => item.type == data);
			return item ? item.name : '';
		},
		getQrCode(id) {
			qrcode({
				community: id,
			}).then((res) => {
				this.qr_img = res.data.data.qrcode;
			});
		},
		selectArea() {
			this.showArea = true;
		},
		cancelArea() {
			this.showArea = false;
		},
		confirmArea(e) {
			this.showArea = false;
			this.areaname = e.value[0].name;
			this.queryparams.page = 1;
			if (e.value[0].value == 0) {
				this.form.community = null;
			} else {
				this.form.community = e.value[0].value;
				uni.setStorageSync("community", this.form.community);
				this.getQrCode(this.form.community);
			}
			this.getCommentsList();
			// this.form.houseType = e.value[0].text;
			// this.form.houseTypeId = e.value[0].id;
		},
		toSearch() {
			uni.navigateTo({
				url: "/pages/search/search",
			});
		},
		handleNavClick(item) {
			if (item.title === "客服微信") {
				this.showQrCode = true;
			} else if (item.title === "商铺&写字楼") {
				uni.navigateTo({
					url: "/pages-house/shop-office/shop-office?community=" +
						this.form.community,
				});
			} else if (item.title === "房屋转租") {
				uni.navigateTo({
					url: "/pages/house-transfer/house-transfer?community=" +
						this.form.community,
				});
			} else if (item.title === "宽带报修") {
				uni.navigateTo({
					url: "/pages/repair/repair",
				});
			}
		},
		toHouseSource() {
			uni.navigateTo({
				url: "/pages-house/safe-house-list/safe-house-list?community=" + this.form.community,
			});
		},
		toAd() {
			uni.navigateTo({
				url: "/pages/notice/notice?community=" + this.form.community,
			});
		},
		toShop() {
			uni.navigateTo({
				url: "/pages/nearby-shop/nearby-shop?community=" + this.form.community,
			});
		},
		toHouseDetail(item) {
			uni.navigateTo({
				url: `/pages-house/house-detail/house-detail?id=${item.id}`,
			});
		},
		handleTabClick(index) {
			this.currentTab = index;
			this.$refs.popup.open("top");
		},
		selectOption1(option) {
			this.filterTabs[this.currentTab].name = option.label;
			this.filterTabs[this.currentTab].value = option.value;
			this.$refs.popup.close();
			this.form.order_type = option.value;
			this.queryparams.page = 1;
			this.getCommentsList();
			// 处理筛选逻辑
		},
		leftTab(id, index) {
			this.leftcurrentTab = index;
			if (id && id !== "") {
				this.form.community = id;
				this.getStreetList(id);
			} else {
				this.form.street = null;
				this.form.community = null;
				this.streetList = [];
			}
		},
		rightTab(item, index) {
			this.rightcurrentTab = index;
			this.form.street = item.id;

			this.filterTabs[this.currentTab].name = item.name;
		},
		areaCancel() {
			this.leftcurrentTab = 0;
			this.rightcurrentTab = 0;
			this.streetList = [];
			this.form.street = "";
			this.form.community = "";
			this.queryparams.page = 1;
			this.getCommentsList();
			this.$refs.popup.close();
		},
		areaConfirm() {
			this.queryparams.page = 1;
			this.getCommentsList();
			this.$refs.popup.close();
		},
		handleChecked(type, item) {
			item.ischeck = !item.ischeck;
			if (item.ischeck) {
				if (type == 1) {
					this.form.house_type.push(item.value);
				}
				if (type == 2) {
					this.form.face.push(item.value);
				}
				if (type == 3) {
					// this.houseTypeOption[2]
					this.houseTypeOption[0].options.forEach((option) => {
						option.ischeck = false;
					});
					item.ischeck = !item.ischeck;
					this.form.floor = item.value;
				}
			} else {
				if (type == 1) {
					this.form.house_type = this.form.house_type.filter(
						(data) => data !== item.value
					);
				}
				if (type == 2) {
					this.form.face = this.form.face.filter((data) => data !== item.value);
				}
				if (type == 3) {
					this.form.floor = this.form.floor.filter(
						(data) => data !== item.value
					);
				}
			}
		},
		houseTypeCancel() {
			this.houseTypeOption.forEach((item) => {
				item.options.forEach((option) => {
					option.ischeck = false;
				});
			});
			this.queryparams.page = 1;
			this.form.house_type = [];
			this.form.face = [];
			this.form.floor = [];
			this.$refs.popup.close();
			this.getCommentsList();
		},
		houseTypeConfirm() {
			this.$refs.popup.close();
			this.queryparams.page = 1;
			this.getCommentsList();
		},
		handleRentSelect(option, index) {
			this.rentcurrentTab = index;
			switch (option) {
				case "不限":
					this.form.rent = "";
					break;
				case "1000元以下":
					this.form.rent = "0-1000";
					break;
				case "1000元-2000元":
					this.form.rent = "1000-2000";
					break;
				case "2000元-3000元":
					this.form.rent = "2000-3000";
					break;
				case "3000元-5000元":
					this.form.rent = "3000-5000";
					break;
				case "5000元以上":
					this.form.rent = "5000-99999";
					break;
			}
		},
		customRentChange(event) {
			if (event > 0) {
				this.rentcurrentTab = -1;
				this.form.rent = "0-" + event;
			}
		},
		rentTypeCancel() {
			this.rentcurrentTab = 0;
			this.form.rent = "";
			this.$refs.popup.close();
			this.getCommentsList();
		},
		rentTypeConfirm() {
			this.$refs.popup.close();
			this.queryparams.page = 1;
			this.getCommentsList();
		},
		handleTagChecked(type, item) {
			item.ischeck = !item.ischeck;
			if (item.ischeck) {
				if (type == 1) {
					this.form.tags.push(item.value);
				}
				if (type == 2) {
					this.form.decoration = item.value;
					this.tagsList[1].options.forEach((option) => {
						option.ischeck = false;
					});
					item.ischeck = true;
				}
				if (type == 3) {
					this.tagsList[2].options.forEach((option) => {
						option.ischeck = false;
					});
					item.ischeck = true;
					this.form.payment_type = [];
					this.form.payment_type.push(item.value);
				}
			} else {
				if (type == 1) {
					this.form.tags = this.form.house_type.filter(
						(data) => data !== item.value
					);
				}
				if (type == 2) {
					this.form.face = "";
				}
				if (type == 3) {
					this.form.payment_type = "";
				}
			}
		},
		tagsTypeCancel() {
			this.rentcurrentTab = 0;
			this.tagsList.forEach((item) => {
				item.options.forEach((option) => {
					option.ischeck = false;
				});
			});
			this.form.tags = [];
			this.form.decoration = "";
			this.form.payment_type = [];
			this.$refs.popup.close();
			this.getCommentsList();
		},
		tagsTypeConfirm() {
			this.$refs.popup.close();
			this.queryparams.page = 1;
			this.getCommentsList();
		},
		async getAreaList() {
			let res = await getHouseOptionList({
				cid: 2,
			});
			this.communityList = Object.entries(res.data.data).map(
				([key, value]) => ({
					name: value,
					value: key,
				})
			);
			this.columnsArea = [
				[...this.communityList]
			];
			console.log(this.form.community);
			if (!this.areaname && !this.form.community) {
				this.areaname = this.columnsArea[0][0].name;
				this.form.community = this.columnsArea[0][0].value;
			}
			this.getQrCode(this.form.community);
			console.log(this.form.community);
			// this.getCommentsList()
		},
		getStreetList(id) {
			getHouseOptionList({
				cid: 3,
				pid: id,
			}).then((res) => {
				this.streetList = Object.entries(res.data.data).map(([key, value]) => ({
					name: value,
					id: key,
				}));
			});
		},
		getHouseOptionLists() {
			Promise.all([
				getHouseOptionList({
					cid: 5,
				}),
				getHouseOptionList({
					cid: 7,
				}),
				getHouseOptionList({
					cid: 8,
				}),
			]).then(([res1, res2, res3]) => {
				if (res1.data.msg == "success") {
					// this.houseTypeOption[0].options = Object.entries(res1.data.data).map(
					// 	([key, value]) => ({
					// 		name: value,
					// 		value: key,
					// 		ischeck: false,
					// 	})
					// );
				}
				if (res2.data.msg == "success") {
					// this.tagsList[2].options = Object.entries(res2.data.data).map(
					// 	([key, value]) => ({
					// 		name: value,
					// 		value: key,
					// 		ischeck: false,
					// 	})
					// );
				}
				if (res3.data.msg == "success") {
					this.tagsList[0].options = Object.entries(res3.data.data).map(
						([key, value]) => ({
							name: value,
							value: key,
							ischeck: false,
						})
					);
				}
			});
		},
		syncValidFields(sourceObj, targetObj) {
			// 遍历源对象的所有属性
			for (const key in sourceObj) {
				if (sourceObj.hasOwnProperty(key)) {
					const value = sourceObj[key];
					let isValid = false;

					// 判断字段有效性
					if (value !== null && value !== undefined) {
						// 处理数组/字符串类型
						if (typeof value === "string" || Array.isArray(value)) {
							isValid = value.length > 0;
						}
						// 处理对象类型（非null且非数组）
						else if (typeof value === "object") {
							isValid = Object.keys(value).length > 0;
						}
						// 处理基础类型
						else {
							isValid = true;
						}
					}

					// 同步到目标对象
					if (isValid) {
						targetObj[key] = value;
					} else {
						// 检查并删除无效字段
						if (targetObj.hasOwnProperty(key)) {
							delete targetObj[key];
						}
					}
				}
			}
			return targetObj;
		},
		closeQrCode() {
			this.showQrCode = false;
		},
		previewQRCode() {
			uni.previewImage({
				urls: [this.$Config.HTTP_REQUEST_URL + "/img/index-qr.png"],
				current: 0,
				longPressActions: {
					itemList: ["识别二维码"],
					success: function (data) { },
					fail: function (err) { },
				},
			});
		},
		toHouseList() {
			uni.navigateTo({
				url: "/pages-house/house-list/house-list?community=" + this.form.community,
			});
		},
		getCommentsList() {
			this.syncValidFields(this.form, this.queryparams);
			getRecomments(this.queryparams).then((res) => {
				this.houseList = res.data.data.data;
				console.log(this.houseList);
				// 更新状态
				this.status =
					this.houseList.length < this.queryparams.page_size ?
						"nomore" :
						"loadmore";
				uni.stopPullDownRefresh(); // 停止下拉刷新
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.queryparams.page = 1; // 重置为第一页
			this.houseList = []; // 清空当前列表数据
			this.getCommentsList(); // 请求第一页数据
			uni.stopPullDownRefresh(); // 停止下拉刷新
		},
		//上拉加载
		onReachBottom() {
			if (this.status === "loading" || this.status === "nomore") return;
			this.status = "loading";
			this.queryparams.page++; // 增加当前页码
			this.getCommentsList();
		},
	},
};
</script>

<style scoped lang="less">
.container {
	min-height: 100vh;
	background-color: #f5f7fb;
}

.status-bar {
	width: 100%;
	background-color: transparent;
}

.top-img-bg {
	width: 100vw;
	height: 508rpx;
	margin-top: -182rpx;
}

.header {
	z-index: 2;
	position: relative;
	margin-top: -40rpx;
	padding: 0 30rpx;

	.search-box {
		background: #fff;
		border-radius: 100rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.location {
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			border-right: 1px solid #eee;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
		}

		.search-input {
			flex: 1;
			margin-left: 20rpx;

			::v-deep .u-search__content {
				background-color: transparent !important;

				.u-search__content__input {
					background-color: transparent !important;
				}
			}
		}
	}
}

.nav-section {
	z-index: 2;
	position: relative;
	display: flex;
	justify-content: space-around;
	padding: 30rpx;
	margin: 20rpx;
	border-radius: 12rpx;
	background-color: #f5f7fb;

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.nav-icon {
			width: 80rpx;
			height: 80rpx;
		}

		.nav-text {
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}
}

.service-cards {
	z-index: 2;
	position: relative;
	padding: 0 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.left,
	.right {
		width: calc(50% - 20rpx);
		height: 268rpx;
	}

	.left {
		.service-card {
			box-sizing: border-box;
			height: 100%;
			background: linear-gradient(270deg, #e8efff 0%, #f3f7ff 100%);

			.card-icon {
				width: 142rpx;
				height: 142rpx;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}

			.card-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #03094a;
			}

			.card-desc {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #5e6aa0;
			}
		}
	}

	.right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.service-card {
			height: 124rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.service-card:nth-child(1) {
			background: linear-gradient(270deg, #e4f7f0 0%, #eefaf5 100%);

			.card-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #2c453c;
			}

			.card-desc {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #436659;
			}
		}

		.service-card:nth-child(2) {
			background: linear-gradient(270deg, #f7f1e4 0%, #faf4ee 100%);

			.card-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #45372c;
			}

			.card-desc {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #665243;
			}
		}

		.card-icon {
			width: 72rpx;
			height: 72rpx;
		}
	}

	.service-card {
		box-sizing: border-box;
		position: relative;
		border-radius: 12rpx;
		padding: 20rpx;

		.card-content {
			display: flex;
			flex-direction: column;

			.card-title {
				margin-bottom: 6rpx;
			}

			.card-btn {
				margin-top: 24rpx;
				box-sizing: border-box;
				width: 100rpx;
				height: 36rpx;
				line-height: 34rpx;
				text-align: center;
				border-radius: 20rpx;
				border: 1rpx solid rgba(3, 9, 74, 0.55);
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #5e6aa0;
			}
		}
	}
}

.recommend {
	z-index: 2;
	position: relative;
	border-radius: 12rpx;
	padding: 20rpx;
	box-sizing: border-box;
	background-color: #f5f7fb;

	.recommend-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.left {
			display: flex;
			align-items: center;

			.recommend-icon {
				width: 116rpx;
				height: 48rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
		}
	}
}

.filter-tabs {
	position: relative;
	margin: 20rpx 0;

	.tab-list {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		border-radius: 8rpx;

		.tab-item:nth-child(2) {
			display: none;
		}

		.tab-item {
			display: flex;
			align-items: center;

			.tab-text {
				font-size: 26rpx;
				color: #666;
				margin-right: 4rpx;

				&.active {
					color: #2979ff;
				}
			}
		}
	}

	.dropdown-content {
		width: 100vw;
		position: absolute;
		left: -40rpx;
		right: 0;
		z-index: 100;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 98;
		}

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;

			.option-list {
				padding: 20rpx;
				max-height: 600rpx;
				overflow-y: auto;

				.option-item {
					padding: 20rpx;

					.option-text {
						font-size: 26rpx;
						color: #333;

						&.active {
							color: #2979ff;
						}
					}
				}
			}
		}
	}
}

.house-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #f5f7fb;

	.house-item {
		width: calc(50% - 20rpx);
		background-color: #fff;
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
		flex-direction: column;
		border-radius: 12px;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;

		.house-img {
			width: 100%;
			height: 192rpx;
			border-radius: 8rpx;
			border-radius: 12px;
		}

		.house-info {
			.house-title {
				font-size: 28rpx;
				font-weight: bold;
				margin: 20rpx 0;
			}

			.house-attrs {
				font-size: 24rpx;
				color: #666;
				margin: 10rpx 0;

				text> {
					margin-right: 20rpx;
				}
			}

			.house-price {
				color: #ff5a5f;

				.price {
					font-size: 32rpx;
					font-weight: bold;
				}

				.unit {
					font-size: 24rpx;
				}
			}

			.house-tags {
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;

				.tag {
					height: 28rpx;
					font-size: 20rpx;
					text-align: center;
					line-height: 28rpx;
					padding: 0 8rpx;
					color: #4f5963;
					border-radius: 4rpx;
					background-color: #f2f5fb;

					&:first-child {
						color: #fe0404;
						background-color: #faf1f1;
					}
				}
			}
		}
	}
}

.group_qr {
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	z-index: 9;

	.qr_box {
		box-sizing: border-box;
		top: 50%;
		left: 50%;
		width: 590rpx;
		height: 900rpx;
		margin-top: -450rpx;
		margin-left: -295rpx;
		position: absolute;
		text-align: center;

		.qr_content {
			box-sizing: border-box;
			width: 590rpx;
			height: 800rpx;
			background: linear-gradient(180deg, #88bef6 0%, #d1e1fe 100%);
			border-radius: 32rpx;
			padding: 50rpx 80rpx;

			.text {
				font-weight: 400;
				font-size: 30rpx;
				color: #013251;
				line-height: 58rpx;
				text-align: center;
				font-style: normal;
				margin-bottom: 34rpx;
				font-family: PingFangSC, PingFang SC;
			}

			.qr_img {
				width: 430rpx;
				height: 430rpx;
				padding: 35rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background: linear-gradient(180deg, #fdfcfc 0%, #faf8f7 100%);
				box-shadow: 0rpx 10rpx 46rpx 0rpx rgba(0, 149, 248, 0.5),
					inset 0rpx -4rpx 12rpx 0rpx #99d1fa;

				image {
					width: 360rpx;
					height: 360rpx;
				}
			}

			.button {
				margin-top: 64rpx;
				width: 100%;
				height: 90rpx;
				border-radius: 90rpx;
				line-height: 90rpx;
				background: #0095f8;
				color: #ffffff;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 30rpx;
				color: #ffffff;
				text-shadow: 0px 4px 8px #0095f8;
				text-align: center;
				font-style: normal;
			}
		}

		::v-deep .u-icon {
			margin-top: 32rpx;
			text-align: center;
			justify-content: center;
		}
	}
}

.scan-btn {
	padding: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.safe-bottom {
	height: 40rpx;
}

.filter_box {
	padding-top: 156rpx;

	.filter_option {
		width: 100%;
		height: auto;

		.option-item1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 24rpx;

			.filter_option_item {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;

				&.active {
					color: #0095f8;
					background: #f5f6fa;
					border-radius: 36rpx;
				}
			}
		}

		.two_level_option {
			width: 100%;
			height: 800rpx;
			background-color: #ffffff;

			.options {
				display: flex;
				justify-content: flex-start;
				height: calc(100% - 168rpx);

				.leftoption {
					height: 100%;
					display: flex;
					box-sizing: border-box;
					padding: 36rpx 24rpx;
					flex-direction: column;
					justify-content: space-between;
					border-right: 4rpx solid #f5f6fa;

					.lefttext {
						width: 208rpx;
						height: 72rpx;
						box-sizing: border-box;
						line-height: 72rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						border-radius: 12rpx;

						&.active {
							background: #f5f6fa;
							color: #0095f8;
						}
					}
				}

				.rightoption {
					height: 100%;
					flex: 1;
					display: flex;
					padding: 36rpx 24rpx;
					box-sizing: border-box;
					flex-direction: column;
					justify-content: space-between;

					.righttext {
						box-sizing: border-box;
						width: 100%;
						text-align: center;
						height: 72rpx;
						line-height: 72rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						padding: 0 40rpx;

						&.active {
							background: #f5f6fa;
							color: #0095f8;
						}
					}
				}

				.similar-list {
					height: 100%;
				}
			}
		}

		.house_type {
			width: 100%;
			height: 880rpx;
			padding: 40rpx 0;
			background-color: #ffffff;

			.tags_type_option_list {
				height: calc(100% - 168rpx);
			}

			.house_type_option {
				padding: 0 40rpx;
				box-sizing: border-box;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					line-height: 40rpx;
					margin-bottom: 24rpx;
				}

				.options {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-start;

					.option-item {
						width: 208rpx;
						height: 68rpx;
						margin-bottom: 24rpx;
						margin-right: 24rpx;
						line-height: 68rpx;
						background: #f5f6fa;
						border-radius: 38rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&.ischeck {
							background-color: #b2c1ff;
						}
					}
				}
			}
		}

		.rent_type {
			width: 100%;
			height: 880rpx;
			padding: 40rpx 0;
			background-color: #ffffff;
			box-sizing: border-box;

			.rent_type_option {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;

				.options {
					width: 100%;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;

					&.active {
						color: #0095f8;
						background: #f5f6fa;
						border-radius: 36rpx;
					}
				}
			}

			.custom_rent {
				width: 100%;
				height: 200rpx;
				padding: 32rpx;
				margin-top: 16rpx;
				background: #f5f6fa;
				border-radius: 38rpx;
				box-sizing: border-box;

				.title {
					line-height: 40rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
				}

				.show_value {
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.tags_type {
			width: 100%;
			height: 880rpx;
			padding: 40rpx 0;
			background-color: #ffffff;
			box-sizing: border-box;

			.tags_type_option_list {
				height: calc(100% - 168rpx);

				.tags_type_option {
					padding: 0 40rpx;
					box-sizing: border-box;

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 40rpx;
						margin-bottom: 24rpx;
					}

					.options {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: flex-start;

						.option-item {
							width: 208rpx;
							height: 68rpx;
							margin-bottom: 24rpx;
							margin-right: 24rpx;
							line-height: 68rpx;
							background: #f5f6fa;
							border-radius: 38rpx;
							text-align: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							&:nth-child(3n) {
								margin-right: 0;
							}

							&.ischeck {
								background-color: #b2c1ff;
							}
						}
					}
				}
			}
		}

		.btns-group {
			padding: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				width: 320rpx;
				height: 88rpx;
				line-height: 88rpx;
				box-sizing: border-box;
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				text-align: center;

				&.default-btn {
					color: #0095f8;
					border: 2rpx solid #0095f8;
				}

				&.primary-btn {
					color: #ffffff;
					background: #0095f8;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.5);
				}
			}
		}
	}
}

.form-item {
	padding: 30rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.title {
		width: 180rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.count-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;

		.count-decrease,
		.count-increase {
			width: 48rpx;
			height: 48rpx;
		}

		.count-number {
			width: 60rpx;
			text-align: center;
			font-size: 26rpx;
			margin: 0rpx 10rpx;
		}
	}

	// .required::after {
	// 	content: '*';
	// 	color: #FE4F04;
	// 	padding-left: 10rpx;
	// 	font-size: 28rpx;
	// 	font-weight: bold;
	// }

	.unit {
		font-size: 28rpx;
		color: #222222;
		margin-left: 20rpx;
	}

	.input-group {
		display: flex;
		align-items: center;
		gap: 40rpx;
		width: 100%;
	}

	.input {
		width: 200rpx;
		text-align: center;
		height: 48rpx;
		background: #F5F6FA;
		border-radius: 4rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 48rpx;
	}

	.value-box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		margin-left: 10rpx;

		.value-info {
			font-size: 28rpx;
			color: #222222;
		}
	}

}
</style>